<template>
  <bm-polyline
    :path="polylinePath"
    :stroke-color="strokeColor"
    :stroke-opacity="strokeOpacity"
    :stroke-weight="strokeWeight"
    :editing="isEdit"
    :strokeStyle="strokeStyle"
    :strokeColor="strokeColor"
    :icons = "icons"
    @lineupdate="updatePolylinePath"
  ></bm-polyline>
</template>

<script>
import BmPolyline from "vue-baidu-map/components/overlays/Polyline";
function createPoint (BMap, options = {}) {
  const {lng, lat} = options
  return new BMap.Point(lng, lat)
}

export default {
  components: {
    BmPolyline
  },
  props: {
    isEdit: { // 是否可编辑
      type: Boolean,
      default: false
    },
    strokeOpacity: { // 线的透明度
      type: Number,
      default: 0.5
    },
    strokeStyle: { // 线的类型 solid dashed
      type: String,
      default: 'solid'
    },
    strokeColor: { // 线的颜色
      type: String,
      default: '#fff'
    },
    strokeWeight: { // 线的粗细
      type: Number,
      default: 2
    },
    icons: { // 线上图标
      type: Array,
      default: function() {
        return []
      }
    },
    polylinePath: {
      type: Array,
      default: function() {
        return []
      }
    },
	bmap: {
		default: () => null
	},
	BMap: {
		default: () => null
	}
  },
  data() {
    return {
      newIcons: [],
	  testpath: [
		  {
			  lng: 120.282326, lat: 31.472289
		  },
		  {
			  lng: 120.282865, lat: 31.466806
		  },
		  {
			  lng: 120.289926, lat: 31.456241
		  }
	  ]
    };
  },
  created() {
	  
  },
  mounted() {
    console.log(this.icons,'propsIcons')
	// this.loadLine()
  },
  beforeDestroy() {},
  methods: {
	loadLine(){
		const {BMap, bmap, polylinePath, strokeColor, strokeWeight, strokeOpacity, strokeStyle, editing, massClear, clicking} = this
		
		var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
			scale: 0.4,//图标缩放大小
			strokeColor:'#fff',//设置矢量图标的线填充颜色
			strokeWeight: '1',//设置线宽
		});
		let icons = new BMap.IconSequence(sy, '10', '30');
		const overlay = new BMap.Polyline(polylinePath.map(item => createPoint(BMap, {lng: item.lng, lat: item.lat})), {
			strokeColor,
			strokeWeight,
			strokeOpacity,
			strokeStyle,
			icons:[icons],
		})
		this.originInstance = overlay
      	bmap.addOverlay(overlay)
	},
    updatePolylinePath(e) {
      let polylinePath = e.target.getPath();
      console.log(polylinePath)
      this.$emit("handleChangePolylinePath",polylinePath)
    },
    // addPolylinePoint() {
    //   this.polylinePath.push({ lng: 116.404, lat: 39.915 });
    // }
  }
};
</script>
<style lang="scss" scoped>
</style>
